// 箭头函数绑定事件
import React from "react";
import ReactDom from "react-dom";
import "./index.css";
class App extends React.Component {
  constructor() {
    super();
    this.state = {
      door: "open",
    };
    // 绑定事件bind 不然this丢失 写法1
    // this.handleClick = this.handleClick.bind(this);
  }
  // 写法1
  // handleClick() {
  //   console.log("click", this);
  //   this.setState({
  //     door: "close",
  //   });
  // }
  // public class fields 语法
  handleClick = () => {
    console.log("click", this);
    this.setState({
      door: "close",
    });
  };
  render() {
    const { door } = this.state;
    // () => this.handleClick() 这种绑定this的方法性能不好不建议
    return <h1 onClick={this.handleClick}>{door} 事件绑定</h1>;
  }
}

ReactDom.render(<App />, document.getElementById("root"));
